"use client";

import { useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { motion } from "framer-motion";
import {
  ChevronRight,
  Edit2,
  Copy,
  Archive,
  MoreHorizontal,
  Sparkles,
  CheckCircle,
  XCircle,
  ArrowLeft,
} from "lucide-react";
import { Shell } from "@/components/Shell";
import { CONTENTS, statusLabel, statusColor } from "@/lib/mock-data";
import { SeoSidebar } from "@/components/contenus/detail/SeoSidebar";
import { ArticleBody } from "@/components/contenus/detail/ArticleBody";

function formatDate(iso: string) {
  const d = new Date(iso);
  return d.toLocaleDateString("fr-FR", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}

export default function ContentDetailPage() {
  const params = useParams();
  const id = typeof params.id === "string" ? params.id : params.id?.[0] ?? "";
  const content = CONTENTS.find((c) => c.id === id);
  const [editing, setEditing] = useState(false);

  if (!content) {
    return (
      <Shell>
        <div className="max-w-lg mx-auto py-32 flex flex-col items-center gap-6 text-center">
          <div className="w-16 h-16 rounded-2xl bg-bg-card border border-border flex items-center justify-center">
            <XCircle className="w-7 h-7 text-text-dim" />
          </div>
          <div>
            <h1 className="text-[20px] font-semibold text-text mb-2">Contenu introuvable</h1>
            <p className="text-[13px] text-text-dim">
              Aucun contenu ne correspond à l'identifiant <code className="font-mono text-accent-light">"{id}"</code>.
            </p>
          </div>
          <Link
            href="/contenus"
            className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-[13px] font-medium border border-border hover:bg-bg-card-hover transition-colors text-text-dim"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            Retour aux contenus
          </Link>
        </div>
      </Shell>
    );
  }

  return (
    <Shell>
      <div className="max-w-[1400px] mx-auto">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-1.5 text-[12.5px] text-text-dim mb-5">
          <Link href="/contenus" className="hover:text-text transition-colors">
            Contenus
          </Link>
          <ChevronRight className="w-3.5 h-3.5 text-text-dimmer" />
          <span className="text-text truncate max-w-[300px]">{content.title}</span>
        </nav>

        {/* Layout principal */}
        <div className="flex flex-col lg:flex-row gap-6">
          {/* Colonne principale */}
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.35 }}
            className="flex-1 min-w-0 flex flex-col gap-5"
          >
            {/* Header */}
            <div className="bg-bg-card border border-border rounded-xl p-5">
              <div className="flex flex-col sm:flex-row sm:items-start gap-4">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-3">
                    <span
                      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-medium border ${statusColor(content.status)}`}
                    >
                      {statusLabel(content.status)}
                    </span>
                    <span className="text-[11px] text-text-dimmer">
                      {content.intent === "informational"
                        ? "Informationnel"
                        : content.intent === "commercial"
                          ? "Commercial"
                          : "Transactionnel"}
                    </span>
                  </div>
                  <h1 className="text-[22px] sm:text-[26px] font-semibold leading-snug text-text mb-2">
                    {content.title}
                  </h1>
                  <p className="text-[12.5px] text-text-dim">
                    Créé le {formatDate(content.createdAt)} · par{" "}
                    <span className="text-text">{content.author}</span>
                  </p>
                </div>
                {/* Actions desktop */}
                <div className="hidden sm:flex items-center gap-2 shrink-0">
                  <button
                    onClick={() => setEditing((e) => !e)}
                    className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-[12.5px] font-medium border transition-colors ${
                      editing
                        ? "bg-accent/15 border-accent/30 text-accent-light"
                        : "border-border hover:bg-bg-card-hover text-text-dim"
                    }`}
                  >
                    <Edit2 className="w-3.5 h-3.5" />
                    {editing ? "Terminer" : "Modifier"}
                  </button>
                  <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-[12.5px] font-medium border border-border hover:bg-bg-card-hover text-text-dim transition-colors">
                    <Copy className="w-3.5 h-3.5" />
                    Dupliquer
                  </button>
                  <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-[12.5px] font-medium border border-border hover:bg-bg-card-hover text-text-dim transition-colors">
                    <Archive className="w-3.5 h-3.5" />
                    Archiver
                  </button>
                  <button className="p-2 rounded-lg border border-border hover:bg-bg-card-hover text-text-dim transition-colors">
                    <MoreHorizontal className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Actions mobile */}
              <div className="flex sm:hidden items-center gap-2 mt-3 flex-wrap">
                <button
                  onClick={() => setEditing((e) => !e)}
                  className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-[12.5px] font-medium border transition-colors ${
                    editing
                      ? "bg-accent/15 border-accent/30 text-accent-light"
                      : "border-border text-text-dim"
                  }`}
                >
                  <Edit2 className="w-3.5 h-3.5" />
                  {editing ? "Terminer" : "Modifier"}
                </button>
                <button className="p-2 rounded-lg border border-border text-text-dim">
                  <MoreHorizontal className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Corps */}
            <div className="bg-bg-card border border-border rounded-xl p-5">
              <ArticleBody content={content} editing={editing} />
            </div>

            {/* Actions bas de page */}
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 p-4 bg-bg-card border border-border rounded-xl">
              <button className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity">
                <CheckCircle className="w-4 h-4" />
                Valider
              </button>
              <button className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-medium border border-accent/30 text-accent-light hover:bg-accent/10 transition-colors">
                <Sparkles className="w-4 h-4" />
                Demander reformulation IA
              </button>
              <div className="sm:flex-1" />
              <button className="flex-1 sm:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-medium border border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors">
                <XCircle className="w-4 h-4" />
                Rejeter
              </button>
            </div>
          </motion.div>

          {/* Sidebar SEO */}
          <motion.div
            initial={{ opacity: 0, x: 8 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.35, delay: 0.1 }}
            className="w-full lg:w-[340px] shrink-0"
          >
            <SeoSidebar content={content} />
          </motion.div>
        </div>
      </div>

      <style>{`
        .prose-article {
          font-size: 14px;
          line-height: 1.75;
          color: var(--tw-text-opacity, #e8e8f0);
        }
        .prose-article p {
          margin-bottom: 1rem;
          color: #a0a0b8;
        }
        .prose-article h2 {
          font-size: 17px;
          font-weight: 600;
          color: #e8e8f0;
          margin-top: 1.75rem;
          margin-bottom: 0.75rem;
          scroll-margin-top: 80px;
        }
        .prose-article strong {
          color: #e8e8f0;
          font-weight: 600;
        }
      `}</style>
    </Shell>
  );
}